<template>
  <div class="star">
    <div
      v-for="(item,index) in starNumber"
      :key="index"
      ref="star-item"
      class="star-item"
      :style="`animationDelay:${index*100}ms;width:${w}px;height:${h}px;`"/>
  </div>
</template>

<script>
export default {
  name: 'StarComponent',
  props: {
    starNumber: {
      type: Number,
      default: 0
    },
    w: {
      type: Number,
      default: 0
    },
    h: {
      type: Number,
      default: 0
    }
  },
  mounted () {
    this.randomStar()
  },
  methods: {
    randomStar () {
      const starArr = this.$refs['star-item']
      // console.log(starArr)
      starArr.forEach(item => {
        // console.log(item.children)
        item.style.top = Math.floor(Math.random() * 720 + 1) + 'px'
        item.style.left = Math.floor(Math.random() * 1536 + 1) + 'px'
      })
    }
  }
}
</script>

<style lang='less' scoped>
.star {
  width: 100%;
  height: 100%;
  .star-item {
    position: absolute;
    width: 6px;
    height: 6px;
    display: inline-block;
    animation: staring 2s infinite linear;
    background: #dad3e1;
    border-radius: 50%;
    box-shadow: 1px 1px 1px gold;
  }
}
@keyframes staring {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
